<template>
    <div class="login">
        <div class="login-form">
            <h4>欢迎登录</h4>
            <div class="login-con-wrap">
                <el-form :model="form" :rules="rules" ref="login-form">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" size="small">
                            <el-button slot="prepend" icon="el-icon-user-solid"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="form.password" size="small">
                            <el-button slot="prepend" icon="el-icon-lock"></el-button>
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" size="small" style="width:100%" @click="login">登录</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { login } from '../http/api'
import { mapMutations } from 'vuex';
export default {
    data(){
        return {
            form: { username: '', password: '' },
            rules: {
                username: [
                    { required: true,message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true,message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        ...mapMutations({
            setToken: 'setToken',
            setUsername: 'setUsername'
        }),
        login(){
            try{
                this.$refs['login-form'].validate(async(valid)=>{
                    if (valid) {
                        const res = await login(this.form);
                        const { token, username } = res.data;
                        console.log(res);
                        this.$message({
                            showClose: true,
                            message: '欢迎回来, ' + username,
                            type: 'success'
                        })
                        this.setToken(token);
                        this.setUsername(username);
                        // this.$store.commit('setToken',token);
                        // this.$store.commit('setUsername',username);
                        this.$router.replace({name: 'index'}); //跳到首页
                    }else {
                        return false;
                    }
                })
            }catch(error){} //捕捉错误
        }
        // login(){
        //     login(this.form).then(res=>{
        //         console.log(res);
        //     })
        // }
    }
}
</script>
<style lang="scss" scoped>
.login{
    width: 100%;
    height: 100vh;
    background: url(https://file.iviewui.com/admin-dist/img/login-bg.0899ffa6.jpg) center center no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}   
.login-form{
    background: #ffffff;
    width: 300px;
    margin-right: 160px;
    border-radius: 10px;
    h4{
        height: 50px;
        line-height: 50px;
        text-indent: 15px;
        font-weight: 700;
        font-size: 14px;
        border-bottom: 1px solid #ddd;
    }
}
.login-con-wrap{
    padding: 25px 15px;
}
</style>